<template>
    <el-card shadow="never">
       <!-- <el-form style="max-width:400px">
         <el-form-item label="月卡">
            <el-input v-model="monthVal"></el-input>
         </el-form-item>
         <el-form-item label="季卡">
            <el-input v-model="seaVal"></el-input>
         </el-form-item>
         <el-form-item label="年卡">
            <el-input v-model="yearVal"></el-input>
         </el-form-item>
         <el-form-item>
            <el-button type="primary">保存</el-button>
         </el-form-item>
       </el-form> -->
       <el-row :gutter="10">
            <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" v-for="item in goods" :key="item.id">
               <div class="card" @click="showBuy(item)" >
                     <div class="payTime">{{ item.title }}</div>
                     <div class="pay-money">￥{{ item.money }}</div>
                     <div class="remark">{{ item.remark }}</div>
                     <el-button class="cardBtn" type="primary">修改</el-button>
               </div>
            </el-col>
         </el-row>
         <el-dialog class="BuyPay" v-model="dialogVisible" title="修改" width="720px" top="9vh" :close-on-click-modal="false">
            <el-form style="max-width:400px">
               <el-form-item label="名字">
                  <el-input v-model="formData.title"></el-input>
               </el-form-item>
               <el-form-item label="价格">
                  <el-input v-model="formData.amount"></el-input>
               </el-form-item>
               <el-form-item label="描述">
                  <el-input v-model="formData.remark"></el-input>
               </el-form-item>
               <el-form-item>
                  <el-button type="primary" @click="save">保存</el-button>
               </el-form-item>
            </el-form>
         </el-dialog>
    </el-card>
</template>
<script setup lang='ts'>
import userApi from '@/api/user'

const monthVal =ref('')
const seaVal =ref('')
const yearVal =ref('')

const formData = reactive({
   "id": '1',
   "amount": '',
   "remark": "",
   "title": ""
})
const dialogVisible = ref(false)

const goods = ref<any>([])

function getData(){
   userApi.allGood().then((res:any)=>{
    goods.value = res
   })
}
getData()

function  showBuy(item:any){
   console.log(item)
   formData.id = item.id
   formData.amount = item.money
   formData.remark = item.remark
   formData.title = item.title
   dialogVisible.value = true
}
function save(){
   userApi.changeGood(formData).then(res =>{
      console.log(res)
      ElMessage.success('修改成功')
      dialogVisible.value = false
      getData()
   })
}
</script>
<style lang='scss' scoped>
.card {
        padding: 15px;
        background-color: #fff;
        margin: 10px 10px 0 0;
        // width: 20%;
        border: 1px solid #e4e7ed;
        border-radius: 5px;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
        .cardBtn{
            width: 68px;
            font-size: 10px;
        }
        .payTime{
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: 600;
         }
               .pay-money{
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: 600;
         }
         .remark{
            margin: 12px 0;
            font-size: 14px;
            color: #4e4b4b;;
         }
    }
.box {
    padding: 40px 0 60px;
    margin: 0 auto;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title {
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
}

.el-row--flex.is-justify-center {
    justify-content: center;
}</style>